:root {
    --primary-color: #00ffdd;
    --year-color: #e54d42;
    --month-color: #f37b1d;
    --day-color: #018dff;
    --week-color: #003cff;
    --hour-color: #6739b6;
    --minute-color: #9c26b0;
    --second-color: #e03997;
}

* {
    padding: 0;
    margin: 0;
}

.wrapper {
    width: 100vw; /* 固定宽度为视口宽度 */
    height: 100vh; /* 固定高度为视口高度 */
    position: relative; /* 确保子元素定位正确 */
}

.wrapper::after {
    position: absolute;
    content: '';
    width: 20%;
    height: 5px;
    background-color: var(--primary-color);
    left: 78.5%;
    top: calc(36% + 20px);
}

.year,
.month,
.day,
.week,
.hour,
.minute,
.second {
    position: absolute;
    left: 78.5%;
    top: 36%;
    transition: all 0.2s linear;
    transform-origin: 0 0;
    line-height: 20px;
    height: 20px;
    font-weight: bolder;
}

.year {
    color: var(--year-color);
}

.month {
    width: 100px;
    color: var(--month-color);
}

.day {
    width: 150px;
    color: var(--day-color);
}

.week {
    width: 220px;
    color: var(--week-color);
}

.hour {
    width: 270px;
    color: var(--hour-color);
}

.minute {
    width: 320px;
    color: var(--minute-color);
}

.second {
    width: 370px;
    color: var(--second-color);
}

span {
    position: absolute;
    right: 0;
    width: 100%;
    text-align: right;
    transform-origin: 0 0;
    transition: all 1s linear;
}

.contact {
    background: linear-gradient(#3e72ab, #39699d);
    background-color: #2ea930;
}

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

#app {
    width: 100%;
    height: 100vh;
}

/* styles.css */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.round,
.round2,
.round3 {
    background-image: radial-gradient(rgba(255, 255, 199, 1), rgba(90, 190, 90, 0.863), rgba(105, 193, 114, 0.8));
    border-radius: 50%;
    animation: shadow 2s infinite;
    transition-property: left, top;
    transition-duration: 1s, 1s;
    transition-timing-function: ease, ease;
    animation: blink 1s infinite;
}

.focus {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    background-size: cover; /* 保持图片比例并覆盖整个容器 */
    background-position: center; /* 图片居中 */
    background-repeat: no-repeat; /* 防止图片重复 */
    animation: focus 3600s infinite alternate;
    -webkit-animation: focus 3600s infinite alternate;
    background: none;
}